<template>
  <div class="map_box">
    <div id="mapDiv"></div>

    <div class="total_all_groups">
      <div class="yj_title">
        <div class="yj_name">网格预警</div>
        <div class="select_month">
          <el-date-picker
            @change="onChangeMonth"
            v-model="month"
            type="month"
            :clearable=clearable
            placeholder="选择月">
          </el-date-picker>
        </div>
      </div>
      <div class="info1">管辖范围：{{grid_title}}</div>
      <div class="info2">
        <span>普通事件：{{p_events}}件</span>
        <span>重点事件：{{z_events}}件</span>
      </div>
    </div>

    <div class="color_demo">
      <div class="color_item">
        <span class="block_color cor4"></span>
        <span>绿色预警</span>
      </div>
      <div class="color_item">
        <span class="block_color cor1"></span>
        <span>黄色预警</span>
      </div>
      <div class="color_item">
        <span class="block_color cor2"></span>
        <span>橙色预警</span>
      </div>
      <div class="color_item">
        <span class="block_color cor3"></span>
        <span>红色预警</span>
      </div>

    </div>
  </div>
</template>

<script>
  import NoData from '../../../components/nodata/NoData'

  export default {
    name: "warning",
    data() {
      return {
        clearable: false  , // 是否显示清除按钮
        month: '',
        p_events: '', // 普通事件
        z_events: '', // 重点事件
        gird_id: 0, // 网格id
        grid_title: '', // 网格名称
        polygons: [],
        map: {},
      }
    },

    components: {
      NoData
    },


    created() {
      this.grid_title = this.$util.title_name;
      let month = this.doHandleDate()
      this.month = month
      window.openInfoWindow = this.openInfoWindow;
    },

    mounted() {
      this.loadmap();
    },

    methods: {
      doHandleDate() { // 获取当前时间
        var myDate = new Date();
        var tYear = myDate.getFullYear();
        var tMonth = myDate.getMonth();
        var m = tMonth + 1;
        if (m.toString().length == 1) {
          m = "0" + m;
        }
        return tYear + '-' + m;
      },

      onChangeMonth(e) { // 选择年份
        console.log('是哪个gird_id',this.gird_id)

        console.log('选择的年月：', e)
        let times = new Date(e)
        var year = times.getFullYear();
        var m = times.getMonth() + 1;
        if (m.toString().length == 1) {
          m = "0" + m;
        }
        console.log('year:', year)
        console.log('m:', m)

        let month = year + '-' + m
        console.log('month传参：', month)
        this.month = month

        if(this.gird_id==0){
          this.getMapGrid()  // 全村筛选时调用网格信息，重新渲染预警颜色
        }else{
          this.getEventsNum() // 某个网格每月事件数
        }
      },

      loadmap() {
        let that = this;
        let map = new T.Map("mapDiv");
        that.map = map;
        //设置显示地图的中心点和级别
        let jwd = that.$util.storage.get("jwd");
        jwd = jwd.split(",");
        map.centerAndZoom(new T.LngLat(jwd[0], jwd[1]), 15);
        //允许鼠标双击放大地图
        map.enableScrollWheelZoom();

        that.getMapGrid(); // 获取网格信息
        var ctrl = new T.Control.MapType([
          {
            title: "地图", //地图控件上所要显示的图层名称
            icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
            layer: TMAP_NORMAL_MAP //地图类型对象，即MapType。
          },
          {
            title: "卫星混合",
            icon:
              "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
            layer: TMAP_HYBRID_MAP
          }
        ]);
        that.map.addControl(ctrl);
      },

      getMapGrid(){ // 获取网格信息
        let that =this;
        let map = new T.Map("mapDiv");
        that.map = map;

        that.$http.get("api/GriderPcApi/getWarning?vollege_id=" + that.$util.vollege_id, {month: that.month}, r => {
          console.log("地图信息：", r.data);
          that.data = r.data.data;
          that.p_events = r.data.p_events;
          that.z_events = r.data.z_events;
          let centerArr = [];
          let centerPoints = [];
          // 改版之后的绘制网格长地图
          r.data.data.forEach(function (v) {
            let bigPoint = v;
            let color = v.color;
            let points=[];
            //画地图上的面
            for (let i = 0; i < v.area_arr.length; i++) {
              v.area_arr[i].forEach(function (g) {
                centerPoints.push(new T.LngLat(g[0], g[1]));
                points.push(new T.LngLat(g[0], g[1]));
              })
            }
            // console.log("POINTS", points);
            //画地图上的面
            //创建面对象
            let polygon = new T.Polygon(points, {
              color: color, weight: 2, lineStyle: "dashed", opacity: 1, fillColor: color, fillOpacity: 0.4
            });
            map.addOverLay(polygon);
            let headimg = new T.Icon({
              iconUrl: bigPoint.grider.pic ? bigPoint.grider.pic : "/static/header.png",
              iconSize: new T.Point(34, 34),
              iconAnchor: new T.Point(17, 48)
            });
            let center = new T.LngLat(v.center_n,v.center_t);
            let marker = new T.Marker(center, {icon: headimg});
            //map.addOverLay(marker);
            let main_id = bigPoint.grider.id;
            let param = {
              bigPoint: bigPoint,
              // center: center,
              // points: points,
              // color: color
            }
            marker.addEventListener("click", function () {
              that.openInfoWindow(param);
            });
            let infoWin = new T.InfoWindow();
            infoWin.setLngLat(center);
            let param1 = JSON.stringify(param).replace(/\"/g, "'");
            let content =
              "<div style='padding:7px 10px;'onclick=\"openInfoWindow(" + param1 + ")\">" +
              // "<div>" + bigPoint.title + "：" + bigPoint.grider.name +
              "<div>" + bigPoint.title +
              "</div>" +
              "</div>";
            infoWin.setContent(content);
            map.addOverLay(infoWin);
            // // 弹出信息
            polygon.main_id = main_id; // 网格长ID
            polygon.points = points;
            polygon.center = center;
            polygon.bigPoint = bigPoint;
            polygon.removeEventListener("click", that.PolygonClick);
            polygon.addEventListener("click", that.PolygonClick);

          });
          // 改版之后的绘制网格长地图
          map.setViewport(centerPoints);

        });
      },

      openInfoWindow(param) { // 点击某个网格显示事件数
        console.log("param", param)
        let that = this;
        let pms = {
          vollege_id: that.$util.vollege_id,
          gird_id: param.bigPoint.id,
          month: that.month
        }
        that.gird_id = param.bigPoint.id;
        that.grid_title = param.bigPoint.title;

        console.log('点击地图网格id：', that.gird_id)

        that.$http.get("api/GriderPcApi/getGridEventsOut", pms, r => {
          console.log('事件aaa:', r)
          that.p_events = r.data.p_events;
          that.z_events = r.data.z_events;
        });
      },

      getEventsNum() {
        let that = this;
        let pms = {
          vollege_id: that.$util.vollege_id,
          gird_id: that.gird_id,
          month: that.month
        }
        that.$http.get("api/GriderPcApi/getGridEventsOut", pms, r => {
          console.log('网格事件bbb:', r)
          that.p_events = r.data.p_events;
          that.z_events = r.data.z_events;
        });
      }

    },
  }
</script>

<style scoped>
  .map_box{
    position: relative;
  }
  #mapDiv, .map_box {
    height: 100%;
    width: 100%;
  }

  /*.map_box >>> .tdt-infowindow-tip-container {*/
    /*background-image: url("/static/marker.png");*/
  /*}*/

  /*.map_box >>> .tdt-infowindow-tip-container {*/
    /*width: 45px;*/
    /*height: 73px;*/
  /*}*/

  .map_box >>> .tdt-marker-pane {
    z-index: 1000;
  }

  .map_box >>> .tdt-marker-icon {
    border-radius: 25px;
  }

  .map_box >>> .tdt-infowindow-close-button {
    display: none;
  }

  .map_box >>> .tdt-container .tdt-control-copyright, .tdt-container .tdt-control-scale {
    display: none;
  }

  .map_box >>> .tdt-infowindow-content {
    margin: 0;
  }

  .map_box >>> .tdt-infowindow-content-wrapper, .tdt-infowindow-tip {
    background: #fff;
    color: #333;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .4);
    border-radius: 8px;
  }

  .select_month >>> .el-date-editor.el-input {
    width: 90px;
  }

  .select_month >>> .el-input--suffix .el-input__inner {
    padding-right: 0;
  }

  .select_month >>> .el-input__inner {
    height: 30px;
    line-height: 30px;
  }

  .yj_title {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #29be74;
    color: #fff;
  }

  .yj_name {
    font-weight: bold;
  }

  .info1, .info2 {
    padding: 0 15px;
  }

  .info2 {
    display: flex;
    flex-direction: column;
  }

  .total_all_groups {
    width: 240px;
    background: white;
    position: absolute;
    z-index: 998;
    top: 0;
    left: 0;
    box-shadow: 0px 3px 14px rgba(0, 0, 0, .4);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-family: 微软雅黑;
  }

  .color_demo{
    position: absolute;
    z-index: 998;
    bottom: 0;
    right: 0;
    width:160px;
    height:180px;
    background: #fff;
    border:1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .color_item{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 18px;
  }
  .block_color{
    display: inline-block;
    width:50px;
    height:25px;

  }
  .cor1{
    background: #ffb822;
  }
  .cor2{
    background: #fc722f;
  }
  .cor3{
    background: red;
  }
  .cor4{
    background: #36c415;
  }
</style>
